<HTML>
<HEAD>
<script type="text/javascript" src="js/prototype.js"></script>
                     
<script type="text/javascript"> 

    // global object that contains Ajax.PeriodicalUpdater 
    var updater;  
  
    // main function for upload monitoring
    function submitPostUsingAjax() {                
        try {
            // get upload status
            updater = new Ajax.PeriodicalUpdater('uploadStatusDiv','uploader/', {
                asynchronous:true, 
                frequency:0.1, 
                method:'get',
                onSuccess:function(request) {
                    if (request.responseText.length > 1) {         
                        $('progressBar').style.visibility = 'visible';
                        $('progressBar').style.width = request.responseText + '%';
                    }
                }                                                                     
            });
        } catch(e) {
            alert('submitPostUsingAjax() failed, reason: ' + e);
        } finally {
        }                                       
        return false;
    }                                                                       
        
    // executes function after page loaded
    function addLoadEvent(func) {
        var oldonload = window.onload;       
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                oldonload();
                func();
            }
        }
    }                                       
        
    // this function will be executed after "target" IFRAME content changed
    function handleUploadFinished() {
        // stop updater manually
        if (typeof updater != 'undefined') {
            updater.stop();
            updater = null;
            $('progressBar').style.visibility = 'hidden';
            alert("http://" + location.host + "/upload/" + $('trgID').contentWindow.document.body.innerHTML);
        }                                                                   
    }
        
    // observe IFrame object for "load" event to stop AJAX updater
    function observeFormSubmit() {
        // add event to observe upload target
        Event.observe('trgID', 'load', handleUploadFinished);
    }                               
       
    // add event handler only after page loaded
    addLoadEvent(observeFormSubmit);        
</script>    

</HEAD>
<BODY>

<iframe id="trgID" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe>              
<form id="myFrm" enctype="multipart/form-data" method="post" target="uploadTrg" action="uploader/" onsubmit="submitPostUsingAjax();">
    <input type="file" name="txtFile0" id="txtFile0"></input><br>
    <input type="submit" id="submitID1" name="submit" value="Upload"></input>
</form>

<div id="uploadStatusDiv" style="width:0px; height:0px; visibility:hidden;"></div>
<table id="progressBar" width="0px" style="border:1px; width:0px; background-color: red; color:black; visibility:hidden; ">
<tr><td></td></tr>
</table>


</BODY>
</HTML>
